<html>
<head>
<meta charset="utf-8">
<style>
@font-face {
  font-family: test;
  src: url(../fonts/mplus/mplus-1p-regular.ttf);
}
body {
  font-family: test;
}
body > div {
  width:410px;
  height:610px;
  float:left;
  border:1px solid green;
  margin:5px;
}
body > div > div {
  width:200px;
  height:200px;
  border:1px solid red;
  line-height:20px;
  text-transform:full-width;
  float:left;
}

.v-lr { writing-mode:vertical-lr; text-orientation:upright }

p {
  margin: 0;
}

b {
  background-color: rgb(224,255,224);
}
i {
  background-color: rgb(255,224,224);
}

</style>

</head>

<body>
<div>
 <div class="v-lr">
  <p>The <i>quick</i> brown fox jumps over the <b>lazy</b> dog.</p>
 </div>
</div>
</body>
</html>
